<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet"/>
        <link href="../../css/header.css" rel="stylesheet"/>
        <style>
            .hide{
                display: none;
            }
        </style>
	</head>

	<body style="top: -2.75rem;">
        <header class="mui-bar mui-bar-nav title">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left hide" style="color: #fff;"></a>
            <h1 class="mui-title title-color">个人信息</h1>
        </header>
        <div class="mui-content" style="margin-top: -0.8125rem">
            
           <ul class="mui-table-view">
               <li class="mui-table-view-cell mui-media">
                   <a id="link_my_face" href="javascript:;">
                       <span class="mui-pull-right mui-icon mui-icon-arrowright" style="line-height: 2.625rem;color: #969896;margin-left: 0.3125rem;"></span>
                       <img id="face_image" class="mui-media-object mui-pull-right" src="">
                       <div class="mui-media-body" style="line-height: 2.625rem;">
                           头像
                       </div>
                   </a>
               </li>
               <li class="mui-table-view-cell mui-media">
                   <a id="link_nickname" href="javascript:;">
                       <span class="mui-pull-right mui-icon mui-icon-arrowright" 
                       style="color: #969896;margin-left: 0.3125rem;"></span>
                       <span id="nickname" class="mui-pull-right"
                       style="color: #777777; font-size: 0.9375rem;">婷婷</span>
                       <div class="mui-media-body">
                           昵称
                       </div>
                   </a>
               </li>
               <li class="mui-table-view-cell mui-media">
                   <a href="javascript:;">
                       <span id="username" class="mui-pull-right"
                       style="color: #777777; font-size: 0.9375rem;">tt123</span>
                       <div class="mui-media-body">
                           账号
                       </div>
                   </a>
               </li>
               <li class="mui-table-view-cell mui-media">
                   <a id="link_qrcode" href="javascript:;">
                       <span class="mui-pull-right mui-icon mui-icon-arrowright" style="color: #969896;margin-left: 0.3125rem;"></span>
                       <img id="qrcode" class="mui-media-object mui-pull-right" src="../../images/qrcode.png"
                       style="max-width: 1.25rem;height: 1.25rem;">
                       <div class="mui-media-body">
                           二维码
                       </div>
                   </a>
               </li>
            </ul>
            <br />
            
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media"
                style="text-align: center;">
                    <a id="link_logout" href="javascript:;">
                        <div class="mui-media-body">
                            退出登录
                        </div>
                    </a>
                </li>
            </ul> 
        </div>
        
		<script src="../../js/mui.js"></script>
        <script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init()
            
            mui.plusReady(function () {
                // 获得当前webview，刷新当前用户信息
                var mineWebview = plus.webview.currentWebview();
                mineWebview.addEventListener("show", function(){
                    refreshUserInfo();
                })
                // 跳转到我的头像页面
                let link_my_face = document.getElementById("link_my_face");
                link_my_face.addEventListener("tap", function(){
                    mui.openWindow("my-face.html", "my-face.html");
                })
                
                // 添加自定义事件，刷新我的头像
                window.addEventListener("refresh_myface", function(){
                    refreshUserInfo();
                })
                
                // 跳转到修改昵称页面
                let link_nickname = document.getElementById("link_nickname");
                link_nickname.addEventListener("tap", function(){
                    mui.openWindow("my-nickname.html", "my-nickname.html");
                })
                
                // 跳转到我的二维码页面
                let link_qrcode = document.getElementById("link_qrcode");
                link_qrcode.addEventListener("tap", function(){
                    mui.openWindow("my-qrcode.html", "my-qrcode.html");
                })
                
                // 退出登录
                let link_logout = document.getElementById("link_logout");
                link_logout.addEventListener("tap", function(){
                    // 移除登录信息
                    app.userLogout();
                    // 关闭websocket连接
                    var chatWebview = plus.webview.getWebviewById("chat-list");
                    mui.fire(chatWebview,"close_websocket");
                    // 跳转到登录页面
                    mui.openWindow("../login.html", "login.html");
                })
            })
            
            function refreshUserInfo(){
                // 获取账号信息
                var user = app.getUserGlobalInfo();
                
                // 设置对应的信息
                let span_nickname = document.getElementById("nickname");
                let span_username = document.getElementById("username");
                let qrcode = document.getElementById("qrcode");
                span_nickname.innerText = user.nickname;
                username.innerText = user.username;
                qrcode.src = user.qrcode;
                
                let my_face_image = document.getElementById("face_image");
                // 如果头像存在则设置，不存在就用默认的
                if (app.isNotNull(user.faceImage)){
                    my_face_image.src = user.faceImage;
                } else {
                    my_face_image.src = app.defaultFace;
                }
            }
            
		</script>
	</body>

</html>
